const ip_port = "http://47.96.4.230:11043"

// 表盘总体轮廓
function MainWatch() {
    this._initDom()
}

// 表盘布局规划
function NodeLayout() {
    this._initDom();
}

// 表盘头部布局
function WatchHead() {
    this._initDom();
}

// 表盘主体布局
function WatchBody() {
    this._initDom();
}

// 表盘底部布局
function WatchBoot() {
    this._initDom();
}

MainWatch.prototype = {
    constructor: MainWatch,
    _initDom: function () {
        this.body = document.body;
        var mainMap = createNodes(["main", "main-attach"]);
        addChild(mainMap.get("main"), mainMap.get("mainAttach"));
        addChild(this.body, mainMap.get("main"));
    }
}

NodeLayout.prototype = {
    constructor: NodeLayout,
    _initDom: function () {
        this.baseElem = document.getElementById("main-attach");
        var nodeMap = createNodes(["watch-head", "watch-body", "watch-boot", "head-left", "head-right", "body-top", "body-bottom", "boot-top", "boot-bottom"], "div");
        addChilds(this.baseElem, [nodeMap.get("watchHead"), nodeMap.get("watchBody"), nodeMap.get("watchBoot")]);
        addChilds(nodeMap.get("watchHead"), [nodeMap.get("headLeft"), nodeMap.get("headRight")]);
        addChilds(nodeMap.get("watchBody"), [nodeMap.get("bodyTop"), nodeMap.get("bodyBottom")]);
        addChilds(nodeMap.get("watchBoot"), [nodeMap.get("bootTop"), nodeMap.get("bootBottom")]);
    }
}

WatchHead.prototype = {
    constructor: WatchHead,
    _initDom: function () {
        // 布局构造
        this.left = document.getElementById("head-left");
        this.right = document.getElementById("head-right");
        var nodeMapLeft = createNodes(["energy-ico", "energy-value"], "div");
        var nodeMapRight = createNodes(["air", "air-quality", "pm25", "ll", "ll-t", "ll-b", "weather", "temperature-current", "temperature-upper", "temperature-upper-ico", "temperature-lower", "temperature-lower-ico", "weather-ico"], "div");
        addChilds(this.left, [nodeMapLeft.get("energyIco"), nodeMapLeft.get("energyValue")]);
        addChilds(this.right, [nodeMapRight.get("air"), nodeMapRight.get("ll"), nodeMapRight.get("weatherIco")]);
        addChilds(nodeMapRight.get("air"), [nodeMapRight.get("airQuality"), nodeMapRight.get("pm25")]);
        addChilds(nodeMapRight.get("ll"), [nodeMapRight.get("llT"), nodeMapRight.get("llB")]);
        addChilds(nodeMapRight.get("llT"), [nodeMapRight.get("weather"), nodeMapRight.get("temperatureUpper"), nodeMapRight.get("temperatureUpperIco")]);
        addChilds(nodeMapRight.get("llB"), [nodeMapRight.get("temperatureCurrent"), nodeMapRight.get("temperatureLower"), nodeMapRight.get("temperatureLowerIco")]);

        // 填充内容
        this.fillDoms();
    },

    fillDomWithText: function (mineId, text = "") {
        var node = document.getElementById(mineId);
        node.innerText = text;
    },

    fillDom: function (parentId, mineId, haveText = false, text = "") {
        newChildNode(parentId, mineId);
        if (haveText) {
            fillText(mineId, text);
        }
    },
    fillDoms: function () {
        newChildNode("energy-ico", "energy-ico-ico");
        // 设备当前电量
        newTextChildNode("energy-value");
        // 空气质量
        newTextChildNodeWithClassName("air-quality", "head-right-text");
        // pm2.5指数
        newTextChildNodeWithClassName("pm25", "head-right-text");
        // 天气
        newTextChildNodeWithClassName("weather", "head-right-text");
        // 最高温度
        newTextChildNodeWithClassName("temperature-upper", "head-right-text");
        newChildNode("temperature-upper-ico", "temperature-upper-ico-ico");
        // 当前温度
        newTextChildNodeWithClassName("temperature-current", "head-right-text");
        // 最低温度
        newTextChildNodeWithClassName("temperature-lower", "head-right-text");
        newChildNode("temperature-lower-ico", "temperature-lower-ico-ico");
        // 天气图标
        newChildNode("weather-ico", "weather-ico-ico");

        // 使用Flask提供的天气接口拿到所有需要的数据
        // 获取城市地址的好像都不太好弄，还是后端去找接口爬出来吧

        // 填充数据
        this.fillContent();
    },
    fillContent: function () {
        navigator.getBattery().then(function (battery) {
            // 是否正在充电，yes-充电
            console.log("Battery charging? " + (battery.charging ? "yes" : "no"));
            // 当前剩余电量
            console.log("Battery level: " + battery.level * 100 + "%");
            // 填充电量信息
            fillText("energy-value-text", parseInt(battery.level * 100) + "%");
            // alert("设备电量:" + battery.level * 100 + "%");

            // 监听充电状态改变
            battery.addEventListener("chargingchange", function () {
                console.log("Battery charging? " + (battery.charging ? "yes" : "no"));
            });

            // 监听剩余电量改变
            battery.addEventListener("levelchange", function () {
                console.log("Battery level: " + battery.level * 100 + "%");
                fillText("energy-value-text", battery.level * 100 + "%");
            });
        });

        setInterval(fillValue(), 60000);

        function fillValue() {
            // 使用客户端公网ip获取所在省市天气
            promise = ajax(opts = {url: ip_port + "/getWeather/", data: {"cip": cip}})
            // promise = ajax(opts = {url: "http://47.96.4.230:11043/testWeather"})
            promise.then(function (successMessage) {
                console.log(successMessage);
                fillText("air-quality-text", successMessage.level);
                fillText("pm25-text", successMessage.ps_pm25);
                fillText("weather-text", successMessage.weather);
                fillText("temperature-upper-text", successMessage.temperature_day + "℃")
                fillText("temperature-current-text", successMessage.temperature + "℃");
                fillText("temperature-lower-text", successMessage.temperature_night + "℃");
            })
        }
    }


}

WatchBody.prototype = {
    constructor: WatchBody,
    _initDom: function () {
        this.top = document.getElementById("body-top");
        this.bottom = document.getElementById("body-bottom");
        var nodeMapTop = createNodes(["watch-time", "time-hh", "time-hl", "rect", "time-mh", "time-ml", "time-sh", "time-sl"]);
        var nodeMapBottom = createNodes(["body-draw", "draw-image"]);
        addChild(this.top, nodeMapTop.get("watchTime"));
        addChild(this.bottom, nodeMapBottom.get("bodyDraw"));
        addChilds(nodeMapTop.get("watchTime"), [nodeMapTop.get("timeHh"), nodeMapTop.get("timeHl"), nodeMapTop.get("rect"), nodeMapTop.get("timeMh"), nodeMapTop.get("timeMl"), nodeMapTop.get("timeSh"), nodeMapTop.get("timeSl")]);
        addChild(nodeMapBottom.get("bodyDraw"), nodeMapBottom.get("drawImage"));
        addClassName(["time-hh", "time-hl"], "time-h");
        addClassName(["time-mh", "time-ml"], "time-m");
        addClassName(["time-sh", "time-sl"], "time-s");

        this.fillDoms();
    },

    fillDoms: function () {
        this.updateTime();
    },

    updateTime: function () {
        var _this = this;
        _this.date = new TimeGeneration();
        setInterval(function () {
            _this.render(_this.date.getDate(), _this.date.getCalendarDate());
        }, 1000);
    },

    // 渲染事件日期
    render: function (date, calendarDate) {
        // 时间，时间不使用TimeGeneration的，可能造成跳秒，直接在此处获取Date()
        let time = new Date();
        // setNumImage("time-hh", parseInt(time.getHours() / 10), "red");
        setNumImage("time-hh", parseInt(time.getHours() / 10),);
        // setNumImage("time-hl", parseInt(time.getHours() % 10), "red");
        setNumImage("time-hl", parseInt(time.getHours() % 10), );
        // setNumImage("time-mh", parseInt(time.getMinutes() / 10), "red");
        setNumImage("time-mh", parseInt(time.getMinutes() / 10), );
        // setNumImage("time-ml", parseInt(time.getMinutes() % 10), "red");
        setNumImage("time-ml", parseInt(time.getMinutes() % 10), );
        // setNumImage("time-sh", parseInt(time.getSeconds() / 10), "red");
        setNumImage("time-sh", parseInt(time.getSeconds() / 10),);
        // setNumImage("time-sl", parseInt(time.getSeconds() % 10), "red");
        setNumImage("time-sl", parseInt(time.getSeconds() % 10), );

        // 日期

        // 农历
    }

}

WatchBoot.prototype = {
    constructor: WatchBoot,
    _initDom: function () {
        this.top = document.getElementById("boot-top");
        this.bottom = document.getElementById("boot-bottom");
        var nodeMapTop = createNodes(["sleep-title", "sleep-time", "distance-title"], "div");
        var nodeBottom = createNode("div", {"className": "distance-value", "id": "distance-value"});
        addChilds(this.top, [nodeMapTop.get("sleepTitle"), nodeMapTop.get("sleepTime"), nodeMapTop.get("distanceTitle")]);
        addChild(this.bottom, nodeBottom);

        this.fillDoms();
    },

    fillDoms: function () {

        newTextChildNodeWithClassName("sleep-title", "boot-top-text boot-title-text");
        newTextChildNodeWithClassName("sleep-time", "boot-top-text boot-value-text");
        newTextChildNodeWithClassName("distance-title", "boot-top-text boot-title-text");
        newTextChildNodeWithClassName("distance-value", "boot-bottom-text boot-value-text");
        fillText("sleep-title-text", "睡眠");
        // fillText("sleep-time-text", "7h32m");
        fillText("sleep-time-text", "-----");
        fillText("distance-title-text", "距离");
        // fillText("distance-value-text", "6.24km");
        fillText("distance-value-text", "-----");
    }
}

function init() {
    new MainWatch();
    new NodeLayout();
    new WatchHead();
    new WatchBody();
    new WatchBoot();
}

init();
